<script setup lang="ts">
import { useCounterStore } from '@/store/modules/counter'

const counter = useCounterStore()
</script>

<template>
  <view class="min-h-screen bg-black">
    <!-- 背景效果 -->
    <view class="fixed inset-0">
      <view class="absolute inset-0 bg-gradient-to-b from-black via-gray-900 to-black opacity-60" />
      <view class="absolute inset-0 opacity-10 bg-grid-pattern" />
    </view>

    <!-- 主内容 -->
    <view class="relative px-8 py-12">
      <view class="mx-auto max-w-2xl space-y-8">
        <!-- 标题 -->
        <view class="text-center">
          <text class="text-2xl font-bold text-white">Pinia 状态管理示例</text>
          <text class="mt-2 block text-gray-400">使用 Pinia 实现计数器功能</text>
        </view>

        <!-- 计数器卡片 -->
        <view class="p-6 rounded-2xl bg-white/5 backdrop-blur-lg">
          <view class="space-y-6">
            <!-- 计数器显示 -->
            <view class="text-center">
              <text class="text-6xl font-bold text-white">{{ counter.count }}</text>
              <view class="mt-2 space-y-1">
                <text class="block text-sm text-gray-400">双倍值：{{ counter.doubleCount }}</text>
                <text class="block text-sm text-gray-400">加一值：{{ counter.countPlusOne }}</text>
              </view>
            </view>

            <!-- 操作按钮 -->
            <view class="flex justify-center gap-4">
              <button
                class="px-6 py-2 rounded-lg bg-primary/20 text-primary transition hover:bg-primary/30"
                @click="counter.decrement"
              >
                减少
              </button>
              <button
                class="px-6 py-2 rounded-lg bg-primary text-white transition hover:bg-primary/90"
                @click="counter.increment"
              >
                增加
              </button>
              <button
                class="px-6 py-2 rounded-lg bg-white/10 text-white transition hover:bg-white/20"
                @click="counter.reset"
              >
                重置
              </button>
            </view>

            <!-- 最后更新时间 -->
            <view class="text-center">
              <text class="text-xs text-gray-500">最后更新：{{ counter.lastUpdated }}</text>
            </view>
          </view>
        </view>

        <!-- 说明卡片 -->
        <view class="p-6 rounded-2xl bg-white/5 backdrop-blur-lg">
          <view class="space-y-4">
            <text class="block text-lg font-medium text-white">功能说明</text>
            <view class="space-y-2">
              <text class="block text-sm text-gray-400">1. 使用 Pinia 管理状态</text>
              <text class="block text-sm text-gray-400">2. 支持数据持久化</text>
              <text class="block text-sm text-gray-400">3. 包含 getters 计算属性</text>
              <text class="block text-sm text-gray-400">4. 支持 actions 方法</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style>
.bg-grid-pattern {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
}
</style>
